<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         *{margin: 0;padding: 0}
         .nav-top{
            height: 50px;
            background-color:rgb(199, 241, 206);
            position: relative;
        }
        .nav-left{
           width: 350px;
           height: 50px;
           
           position: absolute;
           left: 0;
           top: 0%;
       }
        .nav-right{
           width: 200px;
           height: 50px;
           
           position: absolute;
           right: 0;
           top: 0;
       }
         ul{
            list-style: none;
            overflow: hidden;
            margin-top: 10px;
            
        }
       .nav-top li{
            float: left;
            width: 50px;
            
            text-align: center;
        }
        li:hover{
            background-color: rgb(224, 224, 173);
        }
        .list-logo img{
            width: 20px;
            height: 10px;
            margin-top:10px;
           margin-bottom: 10px;
        }
        
        .content{
            width: 800px;
            height: 660px;
         
        }
        .center{
            margin-left: auto;
            margin-right: auto;
        }
        .wrap-logo{
            text-align: center;
        }
        .wrap-logo img{
            width:270px;
        }
        .ist{
            background-color: rgb(100, 174, 223);
        }
        button{
            width: 80px;
            height: 46px;
            background-color: rgb(141, 216, 154);
            background-size: 20px;
            border-radius: 15px;
            text-indent: 15px;
            background-position-y: center;
            position: absolute;
            border: none;
            right: 0;
            top: 0;
            left: 90%;
        }
        button:hover{
            background-color: rgb(113, 224, 132);
        }
        input{
            position: absolute;
            left: 0px;
            top: 0;
            padding: 0;
            border: none;
            outline: none;
            height: 46px;
             
        }
        .input{
            padding-left: 46px;
        }
        .search{
            position:relative;
            width: 750px;
            height: 46px;
            
            border: 1px solid rgb(69, 80, 231);
            border-radius: 15px;
            /* 溢出问题 */
            overflow: hidden;
           
            margin-left: auto;
            margin-right: auto;
            
            top: 0;
        }
        .content-list{
            overflow: hidden;
        }
        .content-list>div{
            width:50%;
            float: left;
            background-color: white;
        }
        ul{
           list-style: none;
            overflow: hidden;
            margin-top: 10px;
       }
       list-right
       .list li{
            float:left;
      
            text-align: center;
       }
       .nav-bottom{
            height: 70px;
            background-color:rgb(199, 241, 206);
            position: relative;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
        .bottom-left{
           
           height: 70px;
           
           position: absolute;
           
           left: 0;
           bottom: 0;
       }
        .bottom-right{
          
           height: 70px;
           
           position: absolute;
          
           right: 0;
           bottom: 0;
       }
         ul{
            list-style: none;
            overflow: hidden;
            margin-top: 10px;
            
        }
       .nav-bottom li{
            float: left;

            margin-left: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="nav-top">
        <div class="nav-left">
           <ul>
                <li><a href="#">新闻</a></li>
                <li><a href="#">hao123</a></li>
                <li><a href="#">地图</a></li>
                <li><a href="#">视频</a></li>
                <li><a href="#">贴吧</a></li>
                <li><a href="#">学术</a></li>
                <li><a href="#">更多</a></li>
           </ul>
        </div>
        <div class="nav-right">
            <ul>
                <li><a href="#">设置</a></li>
                <li><a href="#" class="ist">登陆</a></li>
           </ul>
        </div>
    </div>
    <div class="content center">
        <p class="wrap-logo"><img src="images\02.png" alt=""></p>
           <div class="search">
             <input class="input" type="text">
             <button>百度一下</button>
            </div>
            <div class="content-list">
                <div class="list-left">
                    <ul>
                        <li>百度热榜</li>
                        <li><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E5%A4%96%E4%BA%A4%E9%83%A8%E5%9B%9E%E5%BA%94%E8%8F%85%E4%B9%89%E4%BC%9F%E5%BD%93%E9%80%89%E6%97%A5%E6%9C%AC%E9%A6%96%E7%9B%B8&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">
                            外交部回应菅义伟当选日本首相</a></li>
                        <li><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E7%91%9E%E4%B8%BD%E5%B7%B2%E5%AE%8C%E6%88%90%E6%A0%B8%E9%85%B8%E6%A3%80%E6%B5%8B%E5%85%A8%E9%83%A8%E4%B8%BA%E9%98%B4%E6%80%A7&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">
                            瑞丽已完成核酸检测全部为阴性</a></li>
                        <li><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E8%80%81%E5%A5%B6%E5%A5%B6%E5%9D%90%E5%85%AC%E4%BA%A4%E5%AF%B9%E7%9D%80%E5%8F%B8%E6%9C%BA%E7%9A%84%E5%A4%B4%E6%89%AB%E7%A0%81&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">
                            老奶奶坐公交对着司机的头扫码</a></li>
                    </ul>
                </div>
                <div class="list-right">
                    <ul>
                        <li class="list-logo"><img src="images\换一换.png"alt="">换一换</li>
                        <li><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E9%BB%84%E9%B8%BF%E5%8D%87%E5%8E%BB%E4%B8%96&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">
                            黄鸿升去世</a></li>
                        <li><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E5%A4%A7%E4%B8%80%E6%96%B0%E7%94%9F%E8%B6%85%E4%B8%80%E6%9C%AC%E7%BA%BF118%E5%88%86%E5%8F%AA%E6%8A%A5%E8%80%83%E5%8F%A4&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">
                            大一新生超一本线118分只报考古</a></li>
                        <li><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E5%B1%B1%E7%81%AB%E4%B8%AD%E7%BE%8E%E5%9B%BD%E6%B0%91%E4%BC%97%E8%B7%B3%E6%B9%96%E4%BF%9D%E5%91%BD&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">
                            山火中美国民众跳湖保命</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="nav-bottom">
            <div class="bottom-left">
               <ul>
                    <li><a href="#">设为首页</a></li>
                    <li><a href="#">关于百度</a></li>
                    <li><a href="#">About Baidu</a></li>
                    <li><a href="#">百度营销</a></li>
                    <li><a href="#">使用百度前必读</a></li>
                    <li><a href="#">意见反馈</a></li>
                    <li><a href="#">帮助中心</a></li>
               </ul>
            </div>
            <div class="bottom-right">
                <ul>
                    <li><a href="#">@2020 baidu</a></li>
                    <li><a href="#">(京)-经营性-2017-0020</a></li>
                    <li><a href="#">京公网安备11000002000001</a></li>
                    <li><a href="#">(京ICP证0301713号</a></li>
               </ul>
            </div>
        </div>
</body>
</html>